<template>
  <view class="login-container">
    <view class="login-card">
      <view class="login-title">分拣员登录</view>
      <view class="input-row">
        <view class="input-label">账号</view>
        <uni-easyinput class="login-input" type="text" v-model="account" placeholder="请输入账号" :inputBorder="false" />
      </view>
      <view class="input-row">
        <view class="input-label">密码</view>
        <uni-easyinput class="login-input" type="password" v-model="password" placeholder="请输入密码" :inputBorder="false" />
      </view>
      <button class="login-btn" @click="handleLogin">登录</button>
      <view class="register-link" @click="goToRegister">还没有账号？去注册</view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      account: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      // 验证输入
      if (!this.account || !this.password) {
        uni.showToast({
          title: '请输入账号和密码',
          icon: 'none'
        });
        return;
      }

      try {
        const res = await request({
          url: '/sorter/login',
          method: 'POST',
          data: {
            sorterAccount: this.account,
            sorterPassword: this.password
          }
        });

        console.log('登录响应:', res);

        if (res.code === 200) {
          // 登录成功
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 2000
          });
          // 存储分拣员账号
          uni.setStorageSync('sorterAccount', this.account);
          //存储登录时的jwt
          uni.setStorageSync('sorterJWT', res.data.data);

          // 使用 switchTab 跳转到 tabBar 页面
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/workbench/sorterWorkbench',
              success: (res) => {
                console.log('跳转成功', res);
              },
              fail: (err) => {
                console.error('跳转失败', err);
                uni.showToast({
                  title: '页面跳转失败',
                  icon: 'none'
                });
              }
            });
          }, 1000);
        } else {
          // 登录失败
          uni.showToast({
            title: res.message || '账号或密码错误',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录请求异常:', error);
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }
    },
    goToRegister() {
      // 跳转到分拣员注册页面
      uni.navigateTo({
        url: '/pages/register/sorterRegister'
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.login-card {
  width: 85%;
  max-width: 400px;
  background-color: white;
  border-radius: 15px;
  padding: 40px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

.input-row {
  margin-bottom: 20px;
}

.input-label {
  margin-bottom: 10px;
  color: #666;
}

.login-input {
  --easyinput-border-radius: 10px;
  --easyinput-border-color: #e0e0e0;
  --easyinput-border-width: 1px;
}

.login-btn {
  width: 100%;
  background-color: #007aff;
  color: white;
  border-radius: 10px;
  padding: 15px 0;
  margin-top: 20px;
}

.register-link {
  text-align: center;
  color: #007aff;
  margin-top: 15px;
  font-size: 14px;
}
</style>
